<!--
 * @Author: Qimu
 * @Date: 2020-04-25 06:40:21
 * @LastEditors: Qimu
 * @LastEditTime: 2020-06-26 20:50:21
 * @Description: file content
 * @FilePath: \vue-admin-koa2\vue-admin\src\components\EditAdmin\EditAdmin.vue
 -->
<template>
  <div class="Admin">
    <!-- 编辑管理员 start-->
    <el-dialog title="编辑管理员" :visible.sync="editAdminFormCom.editAdminDialogVisible" width="20%">
      <!-- :rules="editAdminFormRules" -->
      <el-form
        class="editAdminForm"
        :model="editAdminFormCom.editAdminForm"
        ref="editAdminFormRef"
        size="mini"
        label-width="100px"
      >
        <el-form-item label="账号名称" prop="admin_name">
          <el-input v-model="editAdminFormCom.editAdminForm.admin_name"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="admin_email">
          <el-input v-model="editAdminFormCom.editAdminForm.admin_email"></el-input>
        </el-form-item>
        <el-form-item label="电话" prop="admin_tel">
          <el-input v-model="editAdminFormCom.editAdminForm.admin_tel"></el-input>
        </el-form-item>
        <el-form-item label="选择角色" prop="admin_role">
          <el-select
            size="mini"
            v-model="editAdminFormCom.editAdminForm.admin_role"
            placeholder="选择角色"
          >
            <el-option
              v-for="item in rolesList"
              :key="item._id"
              :label="item.role_name"
              :value="item.role_name"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editAdminFormCom.editAdminDialogVisible = false" size="mini">取 消</el-button>
        <el-button type="primary" @click="confirmEditAdmin" size="mini">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 编辑管理员 end-->
  </div>
</template>

<script>
export default {
  name: 'EditAdmin',
  props: {
    editAdminFormCom: {
      type: Object,
      required: true
    },
    rolesList: {
      type: Array,
      required: true
    }
  },
  data() {
    return {}
  },
  methods: {
    //编辑管理员对话框的提交事件
    confirmEditAdmin() {
      const data = {
        _id: this.editAdminFormCom.editAdminForm._id,
        admin_name: this.editAdminFormCom.editAdminForm.admin_name,
        admin_email: this.editAdminFormCom.editAdminForm.admin_email,
        admin_tel: this.editAdminFormCom.editAdminForm.admin_tel,
        admin_role: this.editAdminFormCom.editAdminForm.admin_role
      }
      this.$emit('confirmEditAdmin', data) //向父组件Admin.vue传值
      this.editAdminFormCom.editAdminDialogVisible = false //关闭编辑管理员对话框
    }
  }
}
</script>

<style lang="sass" scope>
.editAdminForm
  .el-input
    width: 150px
</style>